<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<META content="text/html; charset=big5" http-equiv=Content-Type>
<STYLE>.DayN {
	FONT-FAMILY: Arial; FONT-SIZE: 15px; FONT-WEIGHT: bold
}
.DayU {
	BACKGROUND: #ffffff; COLOR: #9fbcab; FONT-FAMILY: Arial; FONT-SIZE: 15px; FONT-WEIGHT: bold
}
.DayD {
	BACKGROUND: #004273; COLOR: #9fbcab; FONT-FAMILY: Arial; FONT-SIZE: 15px; FONT-WEIGHT: bold
}
.WeekDay {
	BACKGROUND: #abd1f2; COLOR: gray; FONT-FAMILY: 細明體; FONT-SIZE: 14px; PADDING-TOP: 2px
}
.WeekEnd {
	BACKGROUND: #abd1f2; COLOR: #d10000; FONT-FAMILY: 細明體; FONT-SIZE: 14px; PADDING-TOP: 2px
}
.DateSelect {
	FONT-FAMILY: 細明體; FONT-SIZE: 12px; WIDTH: 90px
}
</STYLE>

<META content="MSHTML 5.00.2614.3500" name=GENERATOR></HEAD>
<BODY bgColor=#dbe9f5 leftMargin=0 topMargin=0>
<!--onselectstart="return false;"-->
<TABLE border=0 cellPadding=0 cellSpacing=0 height="100%" id="tblCal" width="100%">
  <TBODY>
  <TR>
    <TD align="center" colSpan=7 id=celMonth vAlign="middle">
      <TABLE border=0 cellPadding=0 cellSpacing=0>
        <TBODY>
        <TR>
          <TD align="center" width=100><SELECT class=DateSelect name=selYear 
            onchange=selMonthYear();></SELECT> </TD>
          <TD align="center" width=100><SELECT class=DateSelect name=selMonth 
            onchange=selMonthYear();> <OPTION selected 
              value=January>　一月</OPTION> <OPTION value=February>　二月</OPTION> 
              <OPTION value=March>　三月</OPTION> <OPTION value=April>　四月</OPTION> 
              <OPTION value=May>　五月</OPTION> <OPTION value=June>　六月</OPTION> 
              <OPTION value=July>　七月</OPTION> <OPTION value=August>　八月</OPTION> 
              <OPTION value=September>　九月</OPTION> <OPTION 
              value=October>　十月</OPTION> <OPTION value=November>十一月</OPTION> 
              <OPTION value=December>十二月</OPTION></SELECT> 
  </TD></TR></TBODY></TABLE></TD></TR>
  <TR>
    <TD align="center" class=WeekEnd vAlign="middle" width=28>日</TD>
    <TD align="center" class=WeekDay vAlign="middle" width=28>一</TD>
    <TD align="center" class=WeekDay vAlign="middle" width=28>二</TD>
    <TD align="center" class=WeekDay vAlign="middle" width=28>三</TD>
    <TD align="center" class=WeekDay vAlign="middle" width=28>四</TD>
    <TD align="center" class=WeekDay vAlign="middle" width=28>五</TD>
    <TD align="center" class=WeekEnd vAlign="middle" width=28>六</TD></TR>
  <TR>
    <TD align="center" class=DayN id=d1 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d2 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d3 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d4 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d5 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d6 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d7 vAlign="middle" width=28></TD></TR>
  <TR>
    <TD align="center" class=DayN id=d8 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d9 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d10 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d11 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d12 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d13 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d14 vAlign="middle" width=28></TD></TR>
  <TR>
    <TD align="center" class=DayN id=d15 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d16 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d17 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d18 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d19 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d20 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d21 vAlign="middle" width=28></TD></TR>
  <TR>
    <TD align="center" class=DayN id=d22 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d23 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d24 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d25 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d26 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d27 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d28 vAlign="middle" width=28></TD></TR>
  <TR>
    <TD align="center" class=DayN id=d29 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d30 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d31 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d32 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d33 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d34 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d35 vAlign="middle" width=28></TD></TR>
  <TR>
    <TD align="center" class=DayN id=d36 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d37 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d38 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d39 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d40 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d41 vAlign="middle" width=28></TD>
    <TD align="center" class=DayN id=d42 vAlign="middle" 
width=28></TD></TR></TBODY></TABLE>
<P>
<SCRIPT language=JavaScript><!--
var dCurDate = "";
var objTemp;

window.onload = initWindow;
window.onerror = doError;
document.onmouseover = raiseCel;
document.onmouseout = sinkCel;
document.onmousedown = mdCel;
document.onmouseup = muCel;

function doError() {
	alert(arguments[0]);
}


function initWindow() {
	var dNow = new Date();
	setDateSelect();
	updateCal(dNow);
	displayMonthYear(dNow);
}


function public_setDate(sDate) {
	dCurDate = "";
	objTemp = "";
	var dNow = new Date(sDate);
	dCurDate = dNow;
	if (dNow == "NaN") {dNow = new Date(); dCurDate = "";}
	
	displayMonthYear(dNow);
	updateCal(dNow);
}

function setDay(sDay) {
	sMonth = selMonth.options[selMonth.selectedIndex].value;
	sYear = selYear.value;
	window.external.raiseEvent("ondatechange",sMonth + " " + sDay + ", " + sYear);
}

function displayMonthYear(dDate) {
	iYear = dDate.getFullYear();
	selYear.value = iYear;
	if (selYear.value == "")
	{
		objNewOpt = document.createElement("OPTION");
		objNewOpt.text = iYear;
		objNewOpt.value = iYear;
		if (iYear > parseInt(selYear.options[0].value)) iPos = 0;
			else iPos = selYear.options.length + 1;
		selYear.options.add(objNewOpt,iPos);
		selYear.value = iYear;
	}
	selMonth.selectedIndex = dDate.getMonth();
}

function selMonthYear() {
	dDate = new Date(selYear.value, selMonth.selectedIndex, 1);
	updateCal(dDate);
}

function setDateSelect() {
	dNow = new Date();
	iScrap = dNow.getFullYear()+3;
	for (i=0; i<10; i++)
	{
		objNewOpt = document.createElement("OPTION");
		objNewOpt.text = " "+(iScrap - i)+"年";
		objNewOpt.value = (iScrap - i);
		selYear.options.add(objNewOpt);
	}
}

function raiseCel() {
	objItem = window.event.srcElement;
	if (objItem.className == "DayN")
		if (objItem.innerText != "") objItem.className = "DayU";
	if (objItem.className == "ArrowN") objItem.className = "ArrowU";
}

function sinkCel() {
	objItem = window.event.srcElement;
	if (objItem.className == "DayU") objItem.className = "DayN";
	if (objItem.className == "ArrowU") objItem.className = "ArrowN";
}

function mdCel() {
	objTemp = "";
	sCel = window.event.srcElement;
	if (sCel.className == "DayU") {sCel.className = "DayD"; objTemp = sCel;}
	if (sCel.className == "ArrowU") sCel.className = "ArrowD";
}

function muCel() {
	sCel = window.event.srcElement;
	if (sCel.className == "ArrowD")
	{
		sCel.className = "ArrowU";
		if (sCel.id == "celBack")
		{
			dDate = dateAdd("m", -1, new Date(selYear.value, selMonth.selectedIndex, 1));
			displayMonthYear(dDate);
			updateCal(dDate);
		}
	}
	if (sCel.className == "DayD") setDay(sCel.innerText);
	if (objTemp != "") objTemp.className = "DayN";
}

function updateCal(dDate) {
	iMonth = dDate.getMonth();
	iYear = dDate.getFullYear();
	iDay = dDate.getDate();

	dStart = new Date(iYear, iMonth, 1);
	dEnd = dateAdd("m", 1, dStart);

	iDays = dateDiff("d", dStart, dEnd);
	iStartDay = (dStart.getDay() + 1);
	
	for (i = 1;  i < 43; i++) {
		sScrap = "d" + i
		objItem = document.all[sScrap];
		if (objItem.className == "DayD") objItem.className = "DayN";

		if ((i < iStartDay) || ((i - iStartDay + 1) > iDays)) objItem.innerText = "";
				else objItem.innerText = (i - iStartDay + 1);
   }

	if (dCurDate != "")
		if ((dCurDate.getMonth() == dDate.getMonth()) && (dCurDate.getFullYear() == dDate.getFullYear()))
			document.all("d" + (iStartDay - 1 + dCurDate.getDate())).className = "DayD";
}

function dateAdd(sInterval, iNumber, dDate) {
	dTemp = new Date(dDate);
	if (dTemp == "NaN") dTemp = new Date();
	switch (sInterval) {
		case "s" :
			return new Date(Date.parse(dTemp) + (1000 * iNumber));
		case "n" :
			return new Date(Date.parse(dTemp) + (60000 * iNumber));
		case "h" :
			return new Date(Date.parse(dTemp) + (3600000 * iNumber));
		case "d" :
			return new Date(Date.parse(dTemp) + (86400000 * iNumber));
		case "w" :
			return new Date(Date.parse(dTemp) + ((86400000 * 7) * iNumber));
		case "m" :
			return new Date(dTemp.getFullYear(), (dTemp.getMonth()) + iNumber, dTemp.getDate());
		case "y" :
			return new Date((dTemp.getFullYear() + iNumber), dTemp.getMonth(), dTemp.getDate());
	}
}

function dateDiff(sInterval, dStart, dEnd) {
	dStart = new Date(dStart);
		if (dStart == "NaN") dStart = new Date();
	dEnd = new Date(dEnd);
		if (dEnd == "NaN") dEnd = new Date();
	switch (sInterval) {
		case "s" :
			return parseInt((Date.parse(dEnd) - Date.parse(dStart)) / 1000);
		case "n" :
			return parseInt((Date.parse(dEnd) - Date.parse(dStart)) / 60000);
		case "h" :
			return parseInt((Date.parse(dEnd) - Date.parse(dStart)) / 3600000);
		case "d" :
			iScrap = (Date.parse(dEnd) - Date.parse(dStart)) / 86400000
			iScrap = iScrap + .1
			return parseInt(iScrap);
		case "w" :
			return parseInt((Date.parse(dEnd) - Date.parse(dStart)) / (86400000 * 7));
		case "m" :
			return (dEnd.getMonth() - dStart.getMonth());
		case "y" :
			return (dEnd.getFullYear() - dStart.getFullYear());
	}
}
// --></SCRIPT>
</P></BODY></HTML>
